    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单案例</title>
        <script src="../jquery-3.4.1.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 340px;
                height: 30px;
                margin: 100px auto;
                background-image: url("bg.jpg");
            }
            #box a{
                width: 100px;
                height: 30px;
                display: block;
                line-height: 30px;
                text-align: center;
                color: black;
            }
            ul,ol{
                list-style: none;
            }
            ol li{
                /*position: absolute;*/
                float: left;
                margin-right: 10px;

            }
            ul>li{
                float: left;
                margin-left: 10px;
                position: relative;
            }
            ul>li>a, ul>li>ol>li>a{
                text-decoration:none
            }
            ul>li, ul>li>ol>li{
                background-image: url("libg.jpg");
            }
            li ol{
                top: 30px;
                position: absolute;
                display: none;
            }

        </style>
        <script>
            window.onload=function () {
             $(document).ready(function () {
                var olLi=$('#box>ul>li');
                olLi.mouseenter(function () {
                   $(this).children('ol').show(1000);
                    // this.show(1000);
                });
                 olLi.mouseleave(function () {
                     $(this).children('ol').hide(1000);
                     // this.show(1000);
                 })
             })
            }
        </script>
    </head>
    <body>
    <div id="box">
        <ul>
            <li>
                <a href="#">一级菜单</a>
                <ol>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ol>
            </li>
            <li>
                <a href="#">一级菜单</a>
                <ol>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ol>
            </li>
            <li>
                <a href="#">一级菜单</a>
                <ol>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ol>
            </li>
        </ul>
    </div>

    </body>
    </html>